<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>传感器实时数据</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />-->
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./lib/layui/css/layui.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./data/sensor.js"></script>


    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>

</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">数据管理</a>
                <a>
                    <cite>传感器实时数据</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <!--                            <form class="layui-form layui-col-space5">-->
                    <!--                                <div class="layui-inline layui-show-xs-block">-->
                    <!--                                    <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start"></div>-->
                    <!--                                <div class="layui-inline layui-show-xs-block">-->
                    <!--                                    <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end"></div>-->
                    <!--                                <div class="layui-inline layui-show-xs-block">-->
                    <!--                                    <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input"></div>-->
                    <!--                                <div class="layui-inline layui-show-xs-block">-->
                    <!--                                    <button class="layui-btn" lay-submit="" lay-filter="sreach">-->
                    <!--                                        <i class="layui-icon">&#xe615;</i></button>-->
                    <!--                                </div>-->
                    <!--                            <input type="text" id="test2">-->
                    <!--                            <div class="layui-inline layui-show-xs-block" style="display: none;">-->
                    <!--                                <input class="layui-input"  autocomplete="off" placeholder="开始日" name="start" id="start">-->
                    <!--                            </div>-->
                    <!--                            <div class="layui-inline layui-show-xs-block"  style="display: none;">-->
                    <!--                                <input class="layui-input"  autocomplete="off" placeholder="截止日" name="end" id="end">-->
                    <!--                            </div>-->
                    地点:<select id="select_address" style="width: 150px;height: 20px">
                    <option value="">请选择</option>
                </select>
                    <!--                        <div class="layui-inline layui-show-xs-block">-->
                    <!--                            <input type="text" name="username" placeholder="请输入人名" autocomplete="off" class="layui-input"></div>-->
                    <!--                        <div class="layui-inline layui-show-xs-block">-->
                    <!--                            <input type="text" name="cardId" placeholder="请输入卡号" autocomplete="off" class="layui-input"></div>-->

                    开始
                    <div class="layui-inline layui-show-xs-block">
                        <input type="datetime" class="layui-input" id="start"/>
                    </div>
                    结束
                    <div class="layui-inline layui-show-xs-block">
                        <input type="text" class="layui-input" id="end"/>

                    </div>

                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn" lay-submit="" lay-filter="sreach" onclick="searchInfo()">
                            <i class="layui-icon">&#xe615;</i></button>
                    </div>

                    <!--                            </form>-->
                </div>
                <div class="layui-card-body ">
                    <!--                            <table class="layui-table" lay-data="{url:'./user.json',page:true,toolbar: '#toolbarDemo',id:'test'}" lay-filter="test">-->
                    <!--                                <thead>-->
                    <!--                                    <tr>-->
                    <!--                                        <th lay-data="{type:'checkbox'}">ID</th>-->
                    <!--                                        <th lay-data="{field:'pid', width:80, sort: true}">ID</th>-->
                    <!--                                        <th lay-data="{field:'deviceId', width:120, sort: true, edit: 'text'}">设备标识</th>-->
                    <!--                                        <th lay-data="{field:'deviceIp', edit: 'text', minWidth: 150}">设备IP</th>-->
                    <!--                                        <th lay-data="{field:'deviceLocation', width:80,templet: '#switchTpl'}">位置信息</th>-->
                    <!--                                        <th lay-data="{field:'city', edit: 'text', minWidth: 100}">城市</th>-->
                    <!--                                        <th lay-data="{field:'experience', sort: true, edit: 'text'}">积分</th>-->
                    <!--                                        <th lay-data="{field:'dw_xinzhi',templet: function(d){ return d.dw_xinzhi.titel;}}">学校</th></tr>-->
                    <!--                                </thead>-->
                    <!--                            </table>-->
                    <div class="layui-inline layui-show-xs-block">
                        <a onclick="hSearchFun()" style="color: #0088bb;">高级搜索</a>
                        <div id="hSearch" style="display: none;">
                            筛选气体:<select id="filterGasType" style="width: 80px;height: 20px">
                            <option value="">请选择</option>
                            <option value="CH4">CH4(%)</option>
                            <option value="CO2">CO2(%)</option>
                            <option value="CO">CO(ppm)</option>
                            <option value="T">温度(℃)</option>
                            <option value="H">湿度(%)</option>
                            <option value="O2">氧气(%)</option>
                        </select>
                            筛选条件:<select id="filterCondition" style="width: 80px;height: 20px">
                            <option value="">请选择</option>
                            <option value="=">等于</option>
                            <option value=">">大于</option>
                            <option value="<">小于</option>
                        </select>
                            <input type="text" class="layui-text" value="0.0" id="filterValue" placeholder="请输入查询的值">
                        </div>
                    </div>
                    <table id="demo" class="layui-table" lay-filter="test_table"></table>
                    <div id="test1"></div>
                </div>
                <span>  注：返回结果页,为当前月最新数据，查询其他数据在统计报表查询</span>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    //执行一个laydate实例
    //执行一个laydate实例
    // layui.use(['laydate'],function () {
    //     var laydate=layui.laydate;
    //     laydate.render({
    //         elem: '#end', //指定元素
    //         type:'datetime', // 可选择：年、月、日、时、分、秒
    //         format: 'yyyy-MM-dd HH:mm:ss', //指定时间格式
    //         value: new Date(), // 指定值
    //     });
    //     laydate.render({
    //         elem: '#start', //指定元素
    //         type:'datetime', // 可选择：年、月、日、时、分、秒
    //         format: 'yyyy-MM-dd HH:mm:ss', //指定时间格式
    //         value: new Date(new Date(new Date().toLocaleDateString()).getTime()), // 指定值
    //         ready: function(date) {
    //             this.dateTime.hours = 0;
    //             this.dateTime.minutes = 0;
    //             this.dateTime.seconds = 0;
    //             }
    //         });
    // });
</script>
<script src="./js/laydate/laydate.js"></script>
</body>
<!--    表格上方的菜单-->
<script type="text/html" id="toolbarMenu">
    <div class="layui-btn-container">
        <!--            <button class = "layui-btn layui-btn-danger" lay-event = "delCheckData" > <i class="layui-icon"></i>删除选中 </button>-->
    </div>
</script>

<!--    列里的菜单-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <!--            <button class = "layui-btn layui-btn-sm" lay-event = "getCheckData" > 获取选中行数据 </button>-->
        <!--            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button >-->
        <!--            <button class = "layui-btn layui-btn-sm" lay-event = "isAll" > 验证是否全选</button>-->
        <button class="layui-btn layui-btn-danger" lay-event="delete"> 删除</button>
    </div>
</script>

<script type="text/javascript" src="./js/WindUtils.js"></script>
<script type="text/javascript">

    setInterval(function () {
        // getData();
    }, 1000);

    // $(function () {
    //     searchInfo();
    // });

    let showHide=0;
    function hSearchFun(){
       if(showHide==0){
           $("#hSearch").show();
           showHide=1;
       }else{
           $("#hSearch").hide();
           showHide=0;
       }
    }

    $(function () {
        initInputDate();
        let result = initSelectData();
        var now = new Date();
        var time = now.getFullYear() + "-" + ((now.getMonth() + 1) < 10 ? "0" : "") + (now.getMonth() + 1) + "-" + (now.getDate() < 10 ? "0" : "") + now.getDate();
        $("#start").val(time);
        $("#end").val(time);
        if (result) {
            searchInfo();
        }
    });

    function initInputDate() {
        //执行一个laydate实例
        //执行一个laydate实例
        layui.use(['laydate'], function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#end', //指定元素
                type: 'datetime', // 可选择：年、月、日、时、分、秒
                format: 'yyyy-MM-dd HH:mm:ss', //指定时间格式
                value: new Date(), // 指定值
            });
            laydate.render({
                elem: '#start', //指定元素
                type: 'datetime', // 可选择：年、月、日、时、分、秒
                format: 'yyyy-MM-dd HH:mm:ss', //指定时间格式
                value: new Date(new Date(new Date().toLocaleDateString()).getTime()), // 指定值
                ready: function (date) {
                    this.dateTime.hours = 0;
                    this.dateTime.minutes = 0;
                    this.dateTime.seconds = 0;
                }
            });
        });
    }

    //请求数据
    function getData(page, limit) {
        var resultData;
        var params = {"page": page, "rows": limit}

        let deviceId = $("#select_address option:selected").val();

        if ($("#select_address option").length > 1 && deviceId == "") {
            deviceId = $("#select_address option").eq(1).val();
            $("#select_address").val(deviceId);
        }

        let batteryState = $("#select_battery_status option:selected").val();
        if ($("#start").val() != "" && $("#end").val() != "") {
            let startTime = $("#start").val();// + " 00:00:00";
            if (startTime.length < 12) {
                startTime = startTime + " 00:00:00";
            }
            let endTime = $("#end").val();// + " 23:59:59";
            if (endTime.length < 12) {
                endTime = endTime + " 23:59:59";
            }
            let month = startTime.substr(0, 7);
            if (month != endTime.substr(0, 7)) {
                alert("不允许跨月访问！");
                return;
            }
            params = {
                "page": page,
                "rows": limit,
                "deviceId": deviceId,
                "month": month,
                "startTime": startTime,
                "endTime": endTime,
                "batteryState": batteryState
            }
        } else {
            params = {"page": page, "rows": limit, "empName": empName, "cardId": cardId}
        }

        if($("#filterGasType").val()!=""&&$("#filterCondition").val()!=""){
            params.filterGasType=$("#filterGasType").val();
            params.filterCondition=$("#filterCondition").val();
            params.filterValue=$("#filterValue").val();
        }
        resultData = sensorServer.getSensorDataListByPage(params);
        return resultData;
    }

    function refData(dataList) {
        layui.use('table', function () {

            var table = layui.table;
            //第一个实例
            table.render({
                elem: '#demo'
                //, autoSort: false
                //, even: true
                , height: 500
                , data: dataList
                //                   ,page:true
                , toolbar: '#toolbarMenu'
                //, limits: [10, 20, 30]
                ,limit: dataList.length

                ,cols: [[ //表头
                    {field: 'pid', title: '编号', width: 80, sort: true, fixed: 'left'}
                    , {field: 'deviceLocation', title: '地点', width: 150}
                    , {field: 'ch4', title: '甲烷(%)', width: 100}
                    , {field: 'co2', title: '二氧化碳(%)', width: 100}
                    , {field: 'co', title: '一氧化碳(ppm)', width: 120}
                    , {field: 'o2', title: '氧气(%)', width: 100}
                    , {field: 'temperature', title: '温度(℃)', width: 100}
                    , {field: 'humidity', title: '湿度(%RH)', width: 100}
                    , {field: 'h2s', title: '硫化氢(ppm)', width: 120, hide: true}
                    , {field: 'windDirection', title: '风向', width: 100, hide: true}
                    , {field: 'windSpeed', title: '风速(m/s)', width: 120, hide: true}
                    , {field: 'locateCard', title: '电量/定位卡', width: 80, hide: true}
                    , {field: 'noise', title: '噪音', width: 80, hide: true}
                    , {field: 'pm2d5', title: 'PM2.5', width: 80, hide: true}
                    , {field: 'pm10', title: 'PM10', width: 80, hide: true}
                    , {field: 'uploadtime', title: '时间', width: 180, sort: true}
                    // , {field: '', title: '编辑', width: 250, sort: true, toolbar:'#toolbarDemo'} //,fixed: 'right'
                ]],
                done: function (res, curr, count) {
                    $("[data-field='ch4']").children().each(function () {
                        if ($(this).text() == 0 || $(this).text() == "0") {
                            $(this).text("0.00")
                        }
                    });
                    $("[data-field='co2']").children().each(function () {
                        if ($(this).text() == 0 || $(this).text() == "0") {
                            $(this).text("0.00")
                        }
                    });
                    $("[data-field='temperature']").children().each(function () {
                        let num = 0.0;
                        if ($(this).text() != "温度(℃)") {
                            num = parseFloat($(this).text());
                            num = retainDecimal(num, 1);
                            $(this).text(num.toFixed(1).toString());
                        }
                    });

                    $("[data-field='windDirection']").children().each(function () {
                        let num = 0;
                        let windDirection = "";
                        if ($(this).text() != "风向") {
                            num = $(this).text();
                            if (num != 0) {
                                if (num != 0) {
                                    windDirection = getWindDirection(num);
                                }
                            }
                            $(this).text(windDirection);
                        }
                    });

                },
                parseData: function (res) {
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "data": res.data //解析数据列表
                    }
                }
            });

            //监听单元格编辑
            // table.on('edit(test_table)',
            //     function (obj) {
            //         var value = obj.value //得到修改后的值
            //             ,
            //             data = obj.data //得到所在行所有键值
            //             ,
            //             field = obj.field; //得到字段
            //         layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
            //         //updateTable(data.pid,value);
            //         var jsonResult = sensorServer.updateSensorInfo(obj.data);
            //         console.log(jsonResult);
            //     });

            //监听行单击事件（双击事件为：rowDouble）
            // table.on('row(test_table)', function(obj){
            //     var data = obj.data;
            //     layer.alert(JSON.stringify(data), {
            //         title: '当前行数据：'
            //     });
            //
            //     //标注选中样式
            //     obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            // });

            //列里的工具栏
            table.on('tool(test_table)',
                function (obj) {
                    //var checkStatus = table.checkStatus(obj.config.pid);
                    switch (obj.event) {
                        case 'delete':
                            layer.msg('data:' + obj.data.pid);
                            del(obj);
                            break;
                    }
                    ;
                });

            //----------------
            table.on('sort(test_table)', function (obj) {
                //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                //尽管我们的 table 自带排序功能，但并没有请求服务端。
                //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
                table.reload('#demo', {
                    initSort: "id" //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
                    , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）

                        field: obj.field //排序字段

                        , order: obj.type //排序方式

                    }

                });

            });
            //------------------
        });
    }

    // layui.use('table', function(){
    //     var initData=getData(1,10);
    //     var total=initData.total;
    //     var dataList=initData.data;
    //     var laypage = layui.laypage;
    //     //执行一个laypage实例
    //     laypage.render({
    //          elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
    //         ,count: total //数据总数，从服务端得到
    //         //,page:true
    //         ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
    //             layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
    //             //,curr: 5 //设定初始在第 5 页
    //             ,groups: 1 //只显示 1 个连续页码
    //             ,first: true //不显示首页
    //             ,last: true //不显示尾页
    //
    //         }
    //         ,limits:[10,20,30]
    //         ,limit:10
    //         ,jump: function(obj, first){
    //             //obj包含了当前分页的所有参数，比如：
    //             console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
    //             console.log(obj.limit); //得到每页显示的条数
    //             //首次不执行
    //             if(!first){
    //                 //do something
    //                 refData(getData(obj.curr,obj.limit).data);
    //             }else{
    //                 refData(dataList);
    //             }
    //
    //         }
    //     });
    // });

    //删除
    function del(obj) {
        // var resultData =sensorServer.deleteLogNetworkListByPage(obj.data);
        // if(resultData==1){
        //     location.reload();
        //     layer.msg('删除成功!',{icon:1,time:1000});
        // }else{
        //     layer.msg('删除失败!',{icon:1,time:1000});
        // }
    }

    //查找
    function searchInfo() {
        layui.use('table', function () {
            var index = layer.load(1); //添加laoding,0-2两种方式
            var initData = getData(1, 10);
            var total = initData.total;
            var dataList = initData.data;
            var laypage = layui.laypage;
            //执行一个laypage实例
            //分页组件
            laypage.render({
                elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
                ,count: total //数据总数，从服务端得到
                //,limit:10
                ,limits:[10, 20, 30, 40, 50]
                ,curr:1
                ,group:5
                ,layout: ['prev', 'page', 'next','limit','refresh','skip','count']
                // ,theme: '#1E9FFF'
                //,page:true
                // , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                //     layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] //自定义分页布局
                //     //,curr: 5 //设定初始在第 5 页
                //     , groups: 5 //只显示 1 个连续页码
                //     , first: true //不显示首页
                //     , last: true //不显示尾页
                // }

                , jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数
                    //首次不执行
                    if (!first) {
                        debugger;
                        refData(getData(obj.curr, obj.limit).data);
                    } else {
                        refData(dataList);
                    }
                    layer.close(index);    //返回数据关闭loading
                }
            });
        });
    }

    //初始化地点
    function initSelectData() {
        var dataSensor = sensorServer.getSensorList({"page": 1, "rows": 1000});
        if (dataSensor != null) {
            let optionList = "";
            for (let i = 0; i < dataSensor.data.length; i++) {
                optionList += "<option value='" + dataSensor.data[i].deviceid + "'>" + dataSensor.data[i].devicelocation + "-" + dataSensor.data[i].deviceid + "</option>";
            }
            $("#select_address").append(optionList);
            $("#select_address option:first").prop("selected", 'selected');
            return true;
        }
        return false;
    }

    // 保留几位小数
    //  0.001 + 12.334 = 12.334999999999999  这个也是不行的
    // 改进方法：先加小数部分，然后，加上整数部分
    function retainDecimal(data, deci) { // data 数据， deci 几位
        if (typeof data === 'number') {
            const splitArr = String(data).split('.'); // 字符串截取
            const integerPart = splitArr[0]; // 整数部分
            const deciPart = splitArr[1]; // 小数部分
            // 小数位数小于要保留的位数时，直接返回
            if (!deciPart || deciPart && (deciPart.length < deci + 1)) return data;
            const frontDec = deciPart.substr(0, deci); // 保留几位
            const isAdd = +(deciPart.substr(deci, 1)) >= 5 ? 1 / Math.pow(10, deci) : 0;
            return parseFloat(frontDec / Math.pow(10, deci)) + isAdd + parseFloat(integerPart);
        }
        return data;
    }

    function getWindDirection(num) {


        let windDirection = "-";
        return toDirStr(parseInt(num)); //WWindUtil.auto_to16WindDirection(num);
        if (348 < num || num < 11) {
            windDirection = '北风';
        } else if (11 < num && num < 33) {
            windDirection = '北东风';
        } else if (33 < num && num < 56) {
            windDirection = '东北风';
        } else if (33 < num && num < 78) {
            windDirection = '东北风';
        } else if (33 < num && num < 101) {
            windDirection = '东北风';
        } else if (33 < num && num < 123) {
            windDirection = '东北风';
        } else if (33 < num && num < 146) {
            windDirection = '东北风';
        } else if (33 < num && num < 168) {
            windDirection = '东北风';
        } else if (33 < num && num < 191) {
            windDirection = '东北风';
        } else if (33 < num && num < 213) {
            windDirection = '东北风';
        } else if (33 < num && num < 236) {
            windDirection = '东北风';
        } else if (33 < num && num < 258) {
            windDirection = '东北风';
        } else if (33 < num && num < 56) {
            windDirection = '东北风';
        }
        return windDirection;
    }

    function toDirStr(num) {
        var num = parseInt(num)
        var N = '北';
        var E = '东';
        var S = '南';
        var W = '西';
        var dir = '';

        if (num == 0 || num == 360) {
            dir = '正' + N;
        } else if (num < 90 && num > 0) {
            if (num < 45) {
                dir = N + '偏' + E + num + ' °';
            } else if (num == 45) {
                dir = E + N + num + ' °';
            } else if (num > 45) {
                dir = E + '偏' + N + (90 - num) + ' °';
            }
        } else if (num == 90) {
            dir = '正' + E;
        } else if (num < 180 && num > 90) {

            if (num < 135) {
                dir = E + '偏' + S + (num - 90) + ' °';
            } else if (num == 135) {
                dir = E + S + (num - 90) + ' °';
            } else if (num > 135) {
                dir = S + '偏' + E + (180 - num) + ' °';
            }
        } else if (num == 180) {
            dir = '正' + S;
        } else if (num < 270 && num > 180) {

            if (num < 225) {
                dir = S + '偏' + W + (num - 180) + ' °';
            } else if (num == 225) {
                dir = W + S + (num - 180) + ' °';
            } else if (num > 225) {
                dir = W + '偏' + S + (270 - num) + ' °';
            }
        } else if (num == 270) {
            dir = '正' + W;
        } else if (num < 360 && num > 270) {
            if (num < 315) {
                dir = W + '偏' + N + (num - 270) + ' °';
            } else if (num == 315) {
                dir = W + N + (num - 270) + ' °';
            } else if (num > 315) {
                //dir=S+'偏'+W+(360-num)+' °';
                dir = N + '偏' + W + (360 - num) + ' °';
            }
        }

        return dir;
    }

</script>


</html>
